<!-- 美文推荐模块 -->
<template>
	<div>
		<!-- 卡片+按钮-->
		<el-card class="box-card" shadow="always">
		  
		  <!-- 表格 @selection-change="handleSelectionChange" 多选选项变化时触发 -->
		  <div class="text item">
		    <el-table ref="multipleTable" :data="tableData"
		    tooltip-effect="dark" style="width: 100%" :border="false"
		     
		      max-height="400">
			  
			  <el-table-column label="发表时间" width="200">
			    <template slot-scope="scope">
			      <span v-text="dateFormat(scope.row.operTime)"></span>
			    </template>
			  </el-table-column>

		
		      <el-table-column prop="title" label="文章标题" show-overflow-tooltip>
		
		      </el-table-column>
		
		      <el-table-column prop="author" label="作者" show-overflow-tooltip>
		
		      </el-table-column>
		
		      
		      <el-table-column label="操作" width="100">
		        <!-- 插槽,用来处理表格单元格中的数据 -->
		        <template slot-scope="scope">
		          <el-button size="mini" @click="openArticleInfo(scope.row.id)">查看</el-button>
		        </template>
		      </el-table-column>
		    </el-table>
		
		    <!-- 分页组件-->
		    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum"
		      :page-sizes="[4, 8, 16,32]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
		      :total="queryInfo.total">
		    </el-pagination>
			
		  </div>
		</el-card>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
	      tableData: [],
	      queryInfo: {
	        pageNum: 1,
	        pageSize: 4,
	        total: 0,
	      }
	    }
	  },
	  methods:{
	  	dateFormat(time) { //时间格式转换
	  	  var date = new Date(time);
	  	  var year = date.getFullYear();
	  	  /* 在日期格式中，月份是从0开始的，因此要加0
	  	   * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
	  	   * */
	  	  var month =
	  	    date.getMonth() + 1 < 10 ?
	  	    "0" + (date.getMonth() + 1) :
	  	    date.getMonth() + 1;
	  	  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
	  	
	  	  var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
	  	  var minute = date.getMinutes() < 10 ? "0" +  date.getMinutes() :  date.getMinutes();
	  	  var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
	  	  // 拼接
	  	  return (
	  	    year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second
	  	  );
	  	},
		getArticles(){
			const that = this
			this.$http.post("/articleMeg/getArticle", this.queryInfo).then(function(res) {
			  console.log(res)
			  that.tableData = res.data.articles
			  that.queryInfo.total = res.data.total
			})
		},
		openArticleInfo(id){
			this.$router.push({path:"/articleInfo",query:{id:id}});
		},
		//重新选择页数大小时触发
		handleSizeChange(val) {
		  this.queryInfo.pageSize = val;
		  this.getArticles();
		},
		//重新选择页数
		handleCurrentChange(val) {
		  this.queryInfo.pageNum = val;
		  this.getArticles()
		},
	  },
	  created() {
	  	this.getArticles();
	  }
	}
	
</script>

<style>
	.box-card {
	  width: auto;
	  height: 550px;
	}
	
	.text {
	  font-size: 14px;
	}
</style>
